<template>
    <el-card class="plan-index">
        <div class="title-container">
            <span class="rect"></span>
            <h3>产业更新规划指标</h3>
        </div>
        <el-divider></el-divider>
        <div class="plan">
            <el-card class="before">
                <h3 class="update">更新前</h3>
                <span class="bold">建筑面积</span>
                <div class="areaAndRatio">
                    <h2>{{ landTableData.originalBuildingArea || "-" }}<span class="unit">㎡</span></h2>
                    <el-tag class="ratio">容积率{{ landTableData.originalPlotRatio || "-" }}</el-tag>
                </div>
                <span class="bold">本次变更拆除面积</span>
                <h2>{{ landTableData.industrialUpdateDemolitionArea || "-" }}<span class="unit">㎡</span></h2>
            </el-card>
            <el-card class="after">
                <h3 class="update">更新后</h3>
                <span class="bold">建筑面积</span>
                <div class="areaAndRatio">
                    <h2>{{ landTableData.updatedBuildingArea || "-" }}<span class="unit">㎡</span></h2>
                    <el-tag class="ratio" type="success">容积率{{ landTableData.updatedPlotRatio || "-" }}</el-tag>
                </div>
                <span class="bold">本次变更新增面积</span>
                <h2>{{ landTableData.industrialUpdateNewArea || "-" }}<span class="unit">㎡</span></h2>
                <span class="bold">造价</span>
                <h2>{{ landTableData.industrialUpdateCost || "-" }}<span class="unit">万元</span></h2>
            </el-card>
        </div>
    </el-card>
</template>


<script>
export default {
    data() {
        return {

        }
    },
    props: {
        landTableData: {
            type: Object,
            default: () => { }
        }
    },
    mounted() {
    }
}
</script>


<style scoped lang='scss'>
.unit {
    color: rgb(169, 173, 176);
    // color: #ccc;
    font-size: 16px;
    margin-left: 4px;
}

.ratio {
    height: 26px;
    line-height: 26px;
}

.bold {
    font-weight: bold;
}

::v-deep .el-divider--horizontal {
    margin: 5px 0;
}

::v-deep .el-card__body {
    height: 100%;
}

.plan-index {
    width: 40.5%;
}

.plan {
    display: flex;
    height: calc(100% - 10px);

    .ratio {
        margin-left: 20px;
        border-radius: 15px;
    }

    .before {
        width: 50%;
        margin-right: 15px;
        background: linear-gradient(135deg, rgba(135, 206, 235, 0.2), #FFFFFF);
    }

    .after {
        width: 50%;
        background: linear-gradient(135deg, rgba(152, 251, 152, 0.2), #FFFFFF);
    }

    .update {
        margin-bottom: 7px;
    }

    .areaAndRatio {
        display: flex;
    }
}
</style>